<template>
  <div>
    <div class="my-ad">
      <img
        :src="adList.imgUrl"
        @click="toAd"
      >
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in videoList"
        :key="index"
        @click="toVideo(item)"
      >
        <img
          :src="item.img_url"
          alt=""
        >
        <div class="title">{{item.name}}</div>
      </div>
    </div>
    <div class="advertise">
      <ad unit-id="adunit-9155bec8aa4c0615"></ad>
    </div>
    <div
      class="more-wrap"
      v-show="more"
    >
      <span class="more">تېخىمۇ كۆپ</span>
    </div>
  </div>
</template>
<script>
// import store from "../../utils/store";

export default {
  onShareAppMessage() {
    return {
      title: "ئەڭ يېڭى نادىر ڧىلىملەر بۇ يەردە",
      path: "/pages/Video/main",
      success: res => {}
    };
  },
  data() {
    return {
      type: "",
      pageIndex: 0,
      videoList: {},
      more: true,
      adList: []
    };
  },
  onLoad() {
    let type = this.$root.$mp.query.type;
    this.type = type;
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#ff6e96", //背景颜色值，有效值为十六进制颜色,
      success: res => {}
    });
    /* let config = wx.getStorageSync("config");
    this.adList = config.adList.hotVideo; */
    if (type == "hot") {
      wx.setNavigationBarTitle({ title: "ئاۋات كىنولار" });
    }
    if (type == "new") {
      wx.setNavigationBarTitle({ title: "يېڭى كىنولار" });
    }
    wx.showLoading({
      mask: true //显示透明蒙层，防止触摸穿透
    });
    this.$http
      .get(
        `https://wx.2xur7.cn/weapp/videoList?type=${type}&pageIndex=${
          this.pageIndex
        }`
      )
      .then(res => {
        wx.hideLoading();
        this.videoList = res.data.data.hotList;
        // console.log(res.hotList);
      });
    wx.hideLoading();
  },
  onReachBottom() {
    if (this.more) {
      wx.showLoading({
        mask: true //显示透明蒙层，防止触摸穿透
      });
      this.pageIndex += 1;
      this.$http
        .get(
          `https://wx.2xur7.cn/weapp/videoList?type=${this.type}&pageIndex=${
            this.pageIndex
          }`
        )
        .then(res => {
          wx.hideLoading();
          this.videoList = this.videoList.concat(res.data.data.hotList);
          if (res.data.data.hotList.length < 10 && this.pageIndex > 0) {
            this.more = false;
          }
        });
      wx.hideLoading();
    }
  },
  methods: {
    toVideo(item) {
      //   store.commit("playVideo", item);

      // console.log(item);
      wx.navigateTo({ url: `/pages/VideoDetail/main?vid=${item.video_url}` });
    },
    toAd() {
      let ad = this.adList;
      if (ad.type == "web") {
        wx.navigateTo({ url: "/pages/AD/main?from=moreVideo" });
      }
      if (ad.type == "weapp") {
        let weappInfo = ad.weappInfo;
        wx.navigateToMiniProgram({
          appId: weappInfo.appId,
          path: weappInfo.path
        });
      }
    }
  },
  onUnload() {
    this.pageIndex = 0;
    this.more = true;
  },
  created() {
    let { moreVideoAD } = wx.getStorageSync("config");
    this.adList = moreVideoAD;
  }
};
</script>
<style lang="scss">
.my-ad {
  height: 260rpx;
  width: 96%;
  margin: 20rpx auto;
  border-radius: 30rpx;
  box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
}
.more-wrap {
  width: 100%;
  height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .more {
    display: inline-block;
    color: #666;
    font-size: 28rpx;
  }
}
.content {
  top: 0;
  width: 96%;
  display: grid;
  padding: 5rpx 10rpx;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 17rpx;

  .item {
    border-radius: 20rpx;
    height: 200rpx;
    box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
    .title {
      direction: rtl;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 25rpx;
      color: white;
      text-align: center;
      line-height: 40rpx;
      font-family: "Alp Ekran", Cambria, Cochin, Georgia, Times,
        "Times New Roman", serif, Arial, Helvetica, sans-serif !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
  }
}
</style>
